<template>
	<card-block title="快捷入口">
		<template slot="button">
			<template v-if="!isManage">
				<el-button type="text" @click="isManage = true">管理</el-button>
			</template>
			<template v-else>
				<el-button type="text" @click="handleCancelManage()">取消</el-button>
				<el-button type="text" @click="handleClearData()">清空</el-button>
				<el-button type="text" @click="handleSaveUpdate()">保存</el-button>
			</template>
		</template>
		<template slot="content">
			<div class="empty_quick_access" v-if="quickAccessList.length === 0 && !isManage">
				<el-empty :image-size="100" description="暂无快捷入口"></el-empty>
			</div>
			<div class="index_quick_access" :class="{ nodata: quickAccessList.length === 0 && isManage }" v-else>
				<template v-for="(item, index) in quickAccessList">
					<router-link class="link" :class="{ manage: !!isManage }" :to="!!isManage ? '' : item.path">
						<i v-if="!!isManage" class="el-icon-delete" @click.stop="handleDeleteData(item)"></i>
						<i :class="item.meta.icon"></i>
						{{ item.meta.title }}
					</router-link>
				</template>
				<template v-if="quickAccessList.length < 9 && isManage">
					<el-link icon="el-icon-plus" @click="handleOpenDrawer()">添加入口</el-link>
				</template>
			</div>
		</template>
		<el-drawer title="选择快捷入口" size="360px" :visible.sync="visible" append-to-body>
			<div class="menu_list_wrapper">
				<el-tree ref="tree" :data="menuData" :props="defaultProps" v-bind="treeOptions" @check-change="handleCheckChange"></el-tree>
			</div>
			<div class="select_confirm_btn">
				<el-button size="small" @click="visible = false">取消</el-button>
				<el-button size="small" type="primary" @click="handleConfirmChecked">确定</el-button>
			</div>
		</el-drawer>
	</card-block>
</template>

<script>
import lodash from 'lodash';
import { mapGetters } from 'vuex';
import cardBlock from './cardBlock';
import { getQuickAccess, batchAddQuickAccess, clearQuickAccess } from '@/api/system/tbSysUserQuick';
let quickAccessData = [];
export default {
	components: { cardBlock },
	data() {
		return {
			visible: false,
			isManage: false,
			inputValue: '我的资源库',
			checkedNodes: [],
			originalDatas: [],
			treeOptions: {
				nodeKey: 'path',
				showCheckbox: true,
				checkStrictly: true,
				defaultExpandAll: true,
				checkOnClickNode: true,
				expandOnClickNode: false
			},
			defaultProps: {
				label(data, node) {
					return data.meta.title;
				},
				disabled(data, node) {
					return node.level === 1;
				}
			},
			maxLimit: 9
		};
	},
	computed: {
		...mapGetters(['menuData']),
		quickAccessList() {
			let menuListData = this.$treeToFlat(this.menuData);
			return this.checkedNodes.map((n) => {
				return menuListData.find((item) => item.meta.id === n);
			});
		}
	},
	mounted() {
		this.getQuickAccessList();
	},
	methods: {
		//获取快捷方式
		async getQuickAccessList() {
			let result = await getQuickAccess().then((res) => res.data);
			if (result.code === '0') {
				let datas = result.data || [];
				quickAccessData = datas.map((n) => n.buttonId);
				this.checkedNodes = lodash.cloneDeep(quickAccessData);
				this.originalDatas = lodash.cloneDeep(quickAccessData);
			}
		},

		//取消保存
		handleCancelManage() {
			this.isManage = false;
			this.checkedNodes = lodash.cloneDeep(quickAccessData);
		},

		//打开选择快捷方式框
		handleOpenDrawer() {
			this.visible = true;
			this.$nextTick(() => {
				this.$refs['tree'].setCheckedKeys([]);
				this.quickAccessList.forEach((item) => {
					this.$refs['tree'].setChecked(item, true);
				});
			});
		},

		//树节点选中改变
		handleCheckChange(data, flag) {
			let lists = this.originalDatas;
			if (!!flag && lists.length < this.maxLimit) {
				lists.push(data.meta.id);
			} else {
				let index = lists.findIndex((n) => n === data.meta.id);
				if (index === -1) {
					this.$refs['tree'].setChecked(data, false);
				} else {
					lists.splice(index, 1);
				}
			}
		},

		//选中的快捷方式
		handleConfirmChecked() {
			this.visible = false;
			this.checkedNodes = this.originalDatas;
		},

		//删除快捷键
		handleDeleteData(data) {
			console.log(data);
			let index = this.originalDatas.findIndex((n) => n === data.meta.id);
			this.originalDatas.splice(index, 1);
			this.checkedNodes = this.originalDatas;
		},

		//清空快捷入口
		handleClearData() {
			this.checkedNodes = [];
			this.originalDatas = [];
		},

		//保存快捷方式修改
		async handleSaveUpdate() {
			let isDelete = await this.clearQuickAccessRequest();
			this.isManage = false;
			if (!isDelete) {
				this.$message.error('保存快捷方式失败');
			} else if (this.checkedNodes.length > 0) {
				this.batchAddedRequest();
			}
		},

		//批量添加快捷方式请求
		async batchAddedRequest() {
			let params = this.quickAccessList.map((item) => {
				return { buttonId: item.meta.id, buttonName: item.meta.title };
			});
			let result = await batchAddQuickAccess(params).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success('保存快捷方式成功');
			}
		},

		//清空快捷入口请求
		async clearQuickAccessRequest() {
			let result = await clearQuickAccess().then((res) => res.data);
			if (result.code === '0') {
				return Promise.resolve(true);
			} else {
				return Promise.resolve(false);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.empty_quick_access {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.index_quick_access {
	height: 100%;
	padding: 0 16px 16px;
	box-sizing: border-box;
	overflow: hidden;
	&.nodata {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	a.link,
	.el-link {
		float: left;
		width: 33.3333%;
		height: 33.3333%;
		text-align: center;
		text-decoration: none;
		font-size: 14px;
		border-radius: 4px;
		color: #606266;
		box-sizing: border-box;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		&:not(.manage):hover {
			color: var(--primary-hover);
			background-color: var(--primary-background-hover);
		}

		&.manage {
			padding: 11px 0;
			border: dashed 1px #ccc;
		}

		i.el-icon-delete {
			position: absolute;
			right: 0;
			top: 0;
			color: #f00;
			padding: 5px;
			background-color: #eee;
			z-index: 999;
		}
	}
	.el-link {
		height: 33.3333%;
	}

	::v-deep i:not(.el-icon-delete)[class^='el-icon-'] {
		display: block;
		width: 40px;
		height: 40px;
		font-size: 24px;
		line-height: 40px;
		margin: 0 auto 5px;
		text-align: center;
		border-radius: 3px;
		background-color: #f5f7fa;
	}

	.el-link {
		::v-deep i.el-icon-plus {
			line-height: 38px;
			box-sizing: border-box;
			border: dashed 1px #ccc;
			background: transparent;
		}
		&:hover {
			text-decoration: none;
			color: var(--primary-hover);
			background-color: var(--primary-background-hover);

			&::after {
				content: none;
			}

			::v-deep i {
				border-color: var(--primary-border-hover);
			}
		}
	}
}

.menu_list_wrapper {
	height: calc(100% - 63px);
	overflow: auto;
}

.select_confirm_btn {
	padding: 15px;
	text-align: right;
	border-top: solid 1px #dcdfe6;
}
</style>
